<template>
  <f7-page class="article-details-page">
    <f7-navbar title="详情" back-link="返回"></f7-navbar>
    <h2>{{artDetails.title}}</h2>
    <p>{{$moment(artDetails.add_time * 1000).format('YYYY-MM-DD HH:mm')}}</p>
    <div class="content-padding" v-html="artDetails.content"></div>
  </f7-page>
</template>

<script>
  import { articleDetails } from "../api/home";

  export default {
    name: "article-details",
    data() {
      return {
        artDetails: {}
      }
    },
    mounted() {
      console.log(this.$f7route.query)
      this.init()
    },
    methods: {
      init() {
        articleDetails({id: this.$f7route.query.id}, this.$f7route.query.type).then(res => {
          this.artDetails = res.data;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  h2 {
    font-size: 25px;
    text-align: center;
    padding: 40px 0;
    color:rgba(65,69,205,1);

    background:linear-gradient(57deg,rgba(72,166,199,1) 0%, rgba(87,225,255,1) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  p {
    text-align: right;
    padding: 0 $padding $padding;
    opacity: 0.7
  }
  div {
    font-size: 22px;
  }
</style>